
 <template>
  <div class="home_index"  :class="{ 'home_index--dependence': isDependeceAiVersion }">
    <div class="home_container" >
      <div class="home__scroll_wrapper" ref="refHomeScrollWrapper">
        <agent-home v-show="agentStore.isShow"></agent-home>
        <div class="home_scroll" ref="refHomeScroll" @scroll="handleScrollEvt()">
          <home-screen v-show="!chatStore.isChating && !agentStore.isShow"></home-screen>
          <home-chat v-show="chatStore.isChating" :curNode="curNode" :rootNode="rootNode"></home-chat>
          <div class="anchor_bottom" ref="anchorBottom"></div>
          <div class="to__bottom" :class="{ show: showToBottomAnchor }" @click="scrollToAnchorBottom('smooth')">
            <svg-icon icon-class="bottom-more" class="fs-24"></svg-icon>
          </div>
        </div>
      </div>
      <chat-status />
      <input-box v-show="!agentStore.isShow" @sendMessage="sendMessage" :rootNode="rootNode" :isAgentNew="isAgentNew"></input-box>
      <history />
      <vip-rights-guide />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import HomeScreen from './components/home-screen.vue'
import HomeChat from './components/home-chat.vue'
import InputBox from './components/input-box.vue'
import History from './components/history/index.vue'
import AgentHome from './components/agent/index.vue'
import VipRightsGuide from '@/components/vip-rights-guide/index.vue'
import ChatMessage from '@/mixins/chat-message.js'
import ChatStatus from './components/chat-status.vue'
import { registerInformApi } from '@/xz-fn'

let __homeContainerScrollTop = 0

export default {
  name: 'Chat',
  mixins: [ChatMessage],
  components: {
    HomeScreen,
    HomeChat,
    InputBox,
    ChatStatus,
    History,
    AgentHome,
    VipRightsGuide
  },
  data () {
    return {
      isMunalScrol: false,
      showToBottom: false
    }
  },
  watch: {
    rootNode: {
      deep: false,
      handler () {
        this.isMunalScrol = false
        setTimeout(() => this.scrollToAnchorBottom(), 200)
      }
    },
    'chatStore.docSummarize.document.summary' () {
      this.isMunalScrol = false
      setTimeout(() => this.scrollToAnchorBottom(), 200)
    }
  },
  computed: {
    ...mapGetters(['chatStore', 'agentStore', 'isDependeceAiVersion']),
    showToBottomAnchor () {
      return this.showToBottom && this.chatStore.status !== 'chating' && this.rootNode
    }
  },
  mounted () {
    this.watchHomeScroll()
    this.watchHomeContainer()
    this.watchAnchorBottom()
    this.scrollToAnchorBottom('auto')
    this.listClientEvents()
    this.$xz('HtmlClickReport', { ReportID: 7614 })
  },
  methods: {
    scrollToAnchorBottom  (behavior = 'smooth') {
      if (this.$refs.anchorBottom) this.$refs.anchorBottom.scrollIntoView({ behavior, block: 'end' })
    },

    handleScrollEvt () {
      __homeContainerScrollTop = this.$refs.refHomeScroll.scrollTop
    },
    fixedScrollTop () {
      window.requestAnimationFrame(() => {
        if (__homeContainerScrollTop) {
          this.$refs.refHomeScroll.scrollTop = __homeContainerScrollTop
        }
      })
    },
    watchAnchorBottom () {
      const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
          this.showToBottom = false
        } else {
          this.showToBottom = true
        }
      })
      observer.observe(this.$refs.anchorBottom)
    },
    watchHomeScroll () {
      const observer = new MutationObserver(() => {
        this.fixedScrollTop()
      })
      observer.observe(this.$refs.refHomeScroll, {
        childList: true,
        subtree: true
      })
    },
    /*
      * 设置具体的滚动容器高度，解决在输入框输入内容的时候，页面莫名其妙的滚动
      * 滚动内容里面的opcity变化也会导致内容滚动
      * http://bug.wisetimes.cn/view.php?id=31460
    */
    setHomeScrollHeight () {
      const { height } = this.$refs.refHomeScrollWrapper.getBoundingClientRect()
      this.$refs.refHomeScroll.style.height = `${height}px`
    },
    watchHomeContainer () {
      const observer = new ResizeObserver(() => {
        this.setHomeScrollHeight()
      })
      observer.observe(this.$refs.refHomeScrollWrapper, { childList: true, attributes: true })
    },
    listClientEvents () {
      registerInformApi('Notify_Search', (v) => {
        const text = v?.Search || ''
        if (!text) return
        if (!this.detectIsLogin()) return
        this.$store.dispatch('chat/setChatStore', { chatInput: text })
        this.addNewMessage(text)
      })
      registerInformApi('Notify_ShowAiHomePage', async () => {
        this.$store.dispatch('chat/setChatStore', { prevConversionId: this.chatStore.conversionId || '' })
        await this.addNewMessage()
        this.$store.dispatch('agent/setAgentShow', true)
      })
    }
  }
}

</script>
<style lang="scss">
@import 'highlight.js/scss/arta.scss';
</style>
<style lang="scss" scoped>
.home_index {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  overflow: hidden;
  box-sizing: border-box;
  &--dependence{
    padding-top: 46px;
    .agent__container {
      padding-top: 0;
    }
  }
  // padding-bottom: 20px;
}
.home_container {
  height: 100%;
  padding: 0 6px;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  .home__scroll_wrapper {
    flex: 1 1 100%;
    overflow: hidden;
    position: relative;
  }
  .home_scroll {
    padding: 0 10px;
    height: 100%;
    overflow: auto;
  }
}
.anchor_bottom {
  height: 1px;
  // overflow-anchor: auto;
}
.to__bottom {
  position: absolute;
  bottom: 0px;
  left: 50%;
  z-index: 999;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  background: rgba($color: #000, $alpha: 0.7);
  box-shadow: 0px 0px 20px 0px #00000040;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
  pointer-events: none;
  &.show {
    opacity: 1;
    pointer-events: initial;
  }
  &:hover {
    background: rgba($color: #000, $alpha: 0.9);
  }
}
</style>
